<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1 id="dom"></h1>
    <script src="/dist/bundle.js"></script>
    <script>
                var templateStr = `
            <div>
                <ol>
                    {{#students}}
                    <li class="hobbies">
                        学生{{name}}的爱好
                        <ol>
                            {{#hobbies}}
                            <li>{{.}}</li>
                            {{/hobbies}}
                        </ol>
                    </li>
                    {{/students}}
                </ol>
            </div>
        `
                const data = {
                    students: [
                        { name: '小明', hobbies: ['游戏', '打球'] },
                        { name: '小强', hobbies: ['吃饭', '睡觉'] },
                        { name: '小王', hobbies: ['打豆豆', '游泳'] }
                    ]
                }

        let dom = TemplateEngine.render(templateStr, data)
        let domId = document.getElementById('dom')
        domId.innerHTML = dom
        console.log('dom', dom)
    </script>
</body>

</html>